{% extends "layout.html" %}

{% block content %}
<div class="text-center">
    <h2>Quiz Results</h2>
    <h1 class="display-1 fw-bold {% if score/total >= 0.5 %}text-success{% else %}text-danger{% endif %}">
        {{ score }} / {{ total }}
    </h1>
    <p>You answered {{ score }} out of {{ total }} questions correctly.</p>
</div>

<hr>

<h4>Detailed Breakdown:</h4>
<table class="table table-bordered table-striped mt-3">
    <thead class="table-dark">
        <tr>
            <th>Question</th>
            <th>Your Answer</th>
            <th>Correct Answer</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        {% for res in results %}
        <tr class="{% if res['is_correct'] %}table-success{% else %}table-danger{% endif %}">
            <td>{{ res['question'] }}</td>
            <td>{{ res['your_answer'] }}</td>
            <td>{{ res['correct_answer'] }}</td>
            <td>
                {% if res['is_correct'] %}
                    <span class="badge bg-success">Correct</span>
                {% else %}
                    <span class="badge bg-danger">Wrong</span>
                {% endif %}
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<div class="text-center mt-4">
    <a href="/quiz" class="btn btn-primary">Try Again</a>
    <a href="/" class="btn btn-secondary">Back to Home</a>
</div>
{% endblock %}